<script setup lang="ts">
import { ref, reactive } from "vue";
import { apiBaseCol } from "assets/js/constant.js";
import detailPage from "./components/detailPage.vue";
const dataSource = reactive([
  {
    key: "1",
    name: "name",
    param: "string",
    desc: "详情名称",
  },
  {
    key: "2",
    name: "value",
    param: "string",
    desc: "详情内容",
  },
  {
    key: "3",
    name: "settype",
    param: "string",
    desc: "HxqDetailLieLeft:组件中默认向左，值为'right'的时候向右，为'feed'的时候换行。HxqDetailLieLine:组件默认向右，'feed':换行展示",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">详情组件</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>
        <div class="public-phone-title">卡片形式</div>
        <pre class="public-content-code">
        <code
          class="language-css"
        >
  import { HxqDetailLieLeft } from "vue-mobile-hxq";
        </code></pre>
        <div class="public-phone-title">底部带横线</div>
        <pre class="public-content-code">
        <code
          class="language-css"
        >
  import { HxqDetailLieLine } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <div class="public-title-bold">卡片形式</div>
        <div class="public-content-text">
          详情向左，向右，换行展示。默认向左，settype为'right'向右，'feed'换行
        </div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-detail-lie-left name="名称" :value="'张三'" />
        &lt;hxq-detail-lie-left name="名称" :value="'张三'" :settype="'right'" />
        &lt;hxq-detail-lie-left
          name="地址"
          :value="'超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级多文字'"
          :settype="'feed'"
        />
        </code></pre>
      </div>

      <div class="public-flex-box">
        <pre class="public-content-code">
        <code
          class="language-css"
        >
  import { HxqDetailLieLine } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">底部带横线</div>
        <div class="public-content-text">
          详情向右，换行展示。默认向右，'feed'换行。带底部横线划分，最后一列无底部横线
        </div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-detail-lie-line name="啊啊啊啊" :value="'张三'" />
        &lt;hxq-detail-lie-line
          name="店铺信息"
          :value="'超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级多文字'"
          :settype="'feed'"
        />
        </code></pre>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">卡片形式基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <detailPage></detailPage>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-checkbox-group {
  display: flex;
  justify-content: space-between;
  ::v-deep .van-checkbox {
    height: 48px;
    line-height: 48px;
    // border-bottom: 1px solid #eeeeee;
  }
  ::v-deep .van-checkbox:last-child {
    border-bottom: none;
  }
}
.padding-flex-box {
  background: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  .public-phone-title {
    padding-left: 20px;
  }
}
</style>
